<template>
  <div class="bian">
    <li class="song-list-item" :class="{ active: currentSong && currentSong.id === item.id, 
      playing: currentSong && currentSong.id === item.id && playing}">

      <div class="serial_number" style="color: #999">{{ order < 10 ? '0'+ order : order}}</div>
      <div class="nei">
        <h4>{{ item.name }}
        <span
          v-for="(ali, index) in item.song ? item.song.alias : item.alia"
          :key="index"
          >({{ ali }})</span >
        </h4>
       
        <p>
          <img class="sq" src="../assets/sq.png" alt="">
          <b>
            <span
              v-for="artist in item.song ? item.song.artists : item.ar"
              :key="artist.id"
              >{{ artist.name }}</span
            >
          </b>
          - <i>{{ item.song ? item.song.album.name : item.al.name }}</i>
        </p>
      </div>

      <div class="icon">
        <span class="bo"><svg
          t="1646232281646"
          class="icon"
          viewBox="0 0 1024 1024"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          p-id="4730"
          width="35"
          height="35"
        >
          <path
            d="M0 0h1024v1024H0z"
            fill="#000000"
            opacity=".01"
            p-id="4731"
          ></path>
          <path
            d="M520 128C736.496 128 912 303.504 912 520S736.496 912 520 912C303.6 911.76 128.24 736.4 128 520 128 303.504 303.504 128 520 128z m0 60.288c-183.12 0.192-331.52 148.592-331.712 331.712 0 183.2 148.496 331.712 331.712 331.712 183.2 0 331.712-148.512 331.712-331.712S703.2 188.288 520 188.288z m-84.528 176.576l233.776 155.264-233.76 155.024V364.864z"
            fill="#A8ADBB"
            p-id="4732"
          ></path>
        </svg>
        </span>

        <div class="playicon">
           <span></span>
           <span></span>
           <span></span>
           <span></span>
        </div>
      </div>
    </li>
      <div class="_hr" style="width:94%;margin:0 auto"> <hr /></div>
  </div>
</template>

<script>
export default {
  props: {
    item: Object,
    order: Number,
    currentSong: [Object,null],
    playing: Boolean,
    currentPLayList: Array,
  },
  // data: function () {
  //   return {
  //     detail: null,
  //   }
  // },
  // created: function () {
  //    this.axios
  //       .get("https://apis.netstart.cn/music/playlist/detail", {
  //         params: { id },
  //       })
  //       .then((res) => {
  //         // console.log(res, this);
  //         this.detail = res.data.playlist;
  //       });
  //   },
};
</script>

<style lang="less" scoped>
.bian {
  li {
    border-bottom: 1px;
    padding: 0 8px;
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .serial_number {
      width: 10px;
      text-align: center;
    }
    p {
      margin: 0;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }
  h4 {
    font-weight: 400;
    margin: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 80%;
    font-weight: 400;
  }
  hr {
    margin: 6px 0;
  }
}
.sq {
  width: 15px;
  height: 11px;
}
span,
i {
  font-size: 13px;
  font-weight: 300;
  // overflow: hidden;
  // white-space: nowrap;
  // text-overflow: ellipsis;
}

.nei {
  width: 80%;
}
.icon {
    width: 30px;
    height: 30px;
    .playicon {
      display: none;
    }
  }

  &.active {
    .icon {
      .bo {
        display: none;
      }
      .playicon {
        display: flex;
        justify-content: space-between;
        width: 20px;
        height: 20px;
        padding-left: 5px;
        span {
          width: 12%;
          height: 100%;
          background-color: red;
          display: inline-block;
          animation: loading 0.8s linear infinite alternate;
          transform-origin: bottom;
          &:nth-child(1) {
            animation-delay: -0.6s;
          }
          &:nth-child(2) {
            animation-delay: -0.2s;
          }
          &:nth-child(3) {
            animation-delay: -0.4s;
          }
          &:nth-child(4) {
            animation-delay: 0s;
          }
        }
      }
    }
    &.playing {
      .icon {
        .playicon {
          span {
            animation-play-state: running;
          }
        }
      }
    }
  }
@keyframes loading {
  from {
    transform: rotateX(90deg);
  }
  to {
    transform: rotateX(0);
  }
}
</style>